<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = '分类' + ' - ' + ${site.title},htmlType = category,header = null,leftSidebar = true,rightSidebar = true, content = ~{::content}, head = null, footer = null)}"
>
<th:block th:fragment="content">
    <main class="main full-width">
        <header>
            <h3 class=section-title>
                Categories
            </h3>
            <div class=section-card>
                <div class=section-details>
                    <h3 class=section-count>
                        [[${category.status.postCount}]] POST
                    </h3>
                    <h1 class=section-term th:text="${category.spec.displayName}">

                    </h1>
                    <h2 class=section-description>
                        [[${category.spec.description}]]
                    </h2>
                </div>
                <div class=section-image>
                    <th:block th:if="${theme.config.basic.lazyLoading}">
                        <img th:data-src="${category.spec.cover}"
                             th:src="${theme.config.basic.lazyUrl}" class="lazyLoading"
                             width=120 height=120 loading=lazy>
                    </th:block>
                    <th:block th:if="not ${theme.config.basic.lazyLoading}">
                        <img th:src="${category.spec.cover}"
                             width=120 height=120 loading=lazy>
                    </th:block>
                </div>
            </div>
        </header>
        <section class=article-list--compact>

            <article th:each="post : ${posts.items}">
                <a th:href="${post.status.permalink}">
                    <div class=article-details>
                        <h2 class=article-title>
                            [[${post.spec.title}]]
                        </h2>
                        <footer class=article-time>
                            <time th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}">

                            </time>
                        </footer>
                    </div>
                    <div class=article-image th:if="${theme.config.basic.enableRandomImg and (! #strings.isEmpty(theme.config.basic.postRandomImg) or ! #strings.isEmpty(post.spec.cover)) or (!theme.config.basic.enableRandomImg and ! #strings.isEmpty(post.spec.cover))}">
                        <th:block th:if="${theme.config.basic.lazyLoading}">
                            <img th:data-src="${#strings.isEmpty(post.spec.cover) ? (theme.config.basic.enableRandomImg ? theme.config.basic.postRandomImg+'?pageid='+post.metadata.name : '') : post.spec.cover}"
                                 th:src="${theme.config.basic.lazyUrl}" class="lazyLoading"
                                 width=120 height=120 th:alt="${post.spec.title}" loading=lazy>
                        </th:block>
                        <th:block th:if="not ${theme.config.basic.lazyLoading}">
                            <img th:src="${#strings.isEmpty(post.spec.cover) ? (theme.config.basic.enableRandomImg ? theme.config.basic.postRandomImg+'?pageid='+post.metadata.name : '') : post.spec.cover}"
                                 width=120 height=120 th:alt="${post.spec.title}" loading=lazy>
                        </th:block>
                    </div>
                </a>
            </article>
        </section>
        <!--       pagination-->
        <th:block th:replace="~{modules/pagination :: category}"></th:block>
        <th:block th:replace="~{modules/footer}"/>
    </main>
</th:block>
</html>
